<template>
  <div>
    <x-header :left-options="{showBack: false}" theme="" class="fixHeader">主页</x-header>
    <div class="scrollBody">
      <swiper :show-desc-mask="false" auto loop :list="images" v-model="currentIndex" :aspect-ratio="0.4"
              @on-index-change="onImageEvent">
      </swiper>
      <sticky ref="sticky" :offset="46" :check-sticky-support="ios" v-if="ios">
        <grid class="home_icon" style="background-color: white">
          <grid-item label="询价查询" @on-item-click="onSetTransition({path:'/priceQuery'})">
            <img style="width: 40px;height:40px" slot="icon" src="static/image/home/1-1.png">
          </grid-item>
          <grid-item label="智能询价" @on-item-click="onSetTransition({path:'/inquiry'})">
            <img style="width: 40px;height:40px" slot="icon" src="static/image/home/1-2.png">
          </grid-item>
          <grid-item @on-item-click="openSoon" label="敬请期待">
            <img style="width: 40px;height:40px" slot="icon" src="static/image/home/1-3.png">
          </grid-item>
        </grid>
        <divider style="padding: 10px 40px;background-color: #fbf9fe">近期询价</divider>
      </sticky>
      <div v-if="!ios" style="height: 143px;">
        <sticky ref="sticky" :offset="46" :check-sticky-support="!ios" v-if="!ios">
          <grid class="home_icon" style="background-color: white">
            <grid-item label="询价查询" @on-item-click="onSetTransition({index:0, path: '/priceQuery'})">
              <img style="width: 40px;height:40px" slot="icon" src="static/image/home/1-1.png">
            </grid-item>
            <grid-item label="智能询价" @on-item-click="onSetTransition({index:1, path: '/inquiry'})">
              <img style="width: 40px;height:40px" slot="icon" src="static/image/home/1-2.png">
            </grid-item>
            <grid-item @on-item-click="openSoon" label="敬请期待">
              <img style="width: 40px;height:40px" slot="icon" src="static/image/home/1-3.png">
            </grid-item>
          </grid>
          <divider style="padding: 10px 40px;background-color: #fbf9fe">近期询价</divider>
        </sticky>
      </div>
      <NewestLists :showLoadMore="showLoadMore" :dataLists="list" @error="errorAjax"></NewestLists>
      <popup v-model="showUpdate" position="top" :show-mask="false">
        <div :class="popupWarn?'position-vertical-warn':'position-vertical-demo'">
          {{toastTxt}}
        </div>
      </popup>
    </div>
  </div>
</template>
<script>
  import {XHeader, Swiper, Grid, GridItem, Divider, Sticky, Popup} from 'Vux';
  import NewestLists from './NewestLists.vue'
  import Util from "util"
  export default {
    components: {
      NewestLists,
      XHeader,
      Swiper,
      Grid,
      GridItem,
      Divider,
      Sticky,
      Popup
    },
    data(){
      return {
        popupWarn: false,
        ios: true,
        showLoadMore: false,
        currentIndex: 0,
        showUpdate: false,
        toastTxt: "",
        images: [
          {
            url: 'javascript:',
            img: 'static/image/swiper/1-1.jpg',
            title: '新年贺喜'
          },
          {
            url: 'javascript:',
            img: 'static/image/swiper/1-2.jpg',
            title: '国联贺寿'
          },
          {
            url: 'javascript:',
            img: 'static/image/swiper/1-3.jpg',
            title: '逐梦未来'
          },
          {
            url: 'javascript:',
            img: 'static/image/swiper/1-4.png',
            title: '璀璨国联'
          }
        ],
        list: []
      }
    },
    watch: {
      showUpdate (val) {
        if (val) {
          setTimeout(() => {
            this.showUpdate = false
          }, 1500)
        }
      }
    },
    methods: {
      //唤起toast提示
      showError(info, flag){
        this.showUpdate = true;
        this.toastTxt = info;
        this.popupWarn = flag ? true : false
      },
      //主页面跳转
      onSetTransition(info){
        this.$router.push({
          path: info.path
        });
        if(info.index === 0){
          this.getUrl(7)
        }
        this.$store.commit('CHANGE_TRANSITION', 'left')
      },
      //主页面未开放页面点击
      openSoon(){
        this.showUpdate = true;
        this.toastTxt = "精彩敬请期待";
      },
      //请求失败弹窗
      errorAjax(info){
        this.showUpdate = true;
        this.toastTxt = info;
      },
      //轮询图片触发事件
      onImageEvent(index){
      },
      //修改数据格式
      fixedData(lists){
        let lis = [];
        if (lists.length > 0) {
          for (let i = 0; i < lists.length; i++) {
            lis.push({
              src: '',
              fallbackSrc: '',
              riskNo: lists[i].riskAssessNo,
              name: lists[i].name,
              title: lists[i].companyName,
              desc: '待处理岗 : ' + lists[i].state,
              state: lists[i].state,
              date: lists[i].date,
              batch: lists[i].batchNos,
              passFlag: lists[i].flag
            })
          }
        } else {
          lis = []
        }
        this.list = lis
      },
      //获取随机UUID
      //拉取数据
      getUrl(flag){
        this.$vux.loading.show({
          text: '加载中'
        });
        let time = new Date();
        let obj = {
          head: {
            tranDate: time.toLocaleDateString(),
            tranTime: time.toLocaleTimeString(),
            tranNo: Util.getUUid(),
            funcFlag: "mitMobile"
          },
          body: {
            agentCode: this.$store.state.app.loginInfo ? this.$store.state.app.loginInfo.workNumber : this.$store.state.app.workNumber,
            timeFlag: flag
          }
        };
        $.ajax("../../ui/servlet/GCASServlet/query", {
          method: "post",
          contentType: "text/json;charset=UTF-8",
          data: JSON.stringify(obj),
          success: (info) => {
            this.$vux.loading.hide();
            if (info.code === 400) {
              this.showError('查询信息失败',true)
            } else {
              let data = JSON.parse(info);
              if (data.head.flag === "1") {
                this.list = [];
                this.showLoadMore = true;
              } else {
                let lists = data.body.ecinquiryResultDetailDTOList === null ? [] : data.body.ecinquiryResultDetailDTOList;
                this.fixedData(lists);
                if(flag === 7){
                  this.$store.commit("SAVE_ONCE_GET_LISTS", lists);
                }
                this.showLoadMore = false;
              }
            }
          }
        })
      }
    },
    mounted(){
      this.ios = this.$store.state.app.ios;
      this.getUrl(7);
    }
  }
</script>
<style>
  .home_icon > a > .weui-grid__icon {
    width: 40px;
    height: 40px;
  }
</style>
